// base
@mixin flex-row {
  display: flex;
  flex-direction: row;
}

@mixin flex-column {
  display: flex;
  flex-direction: column;
}

@mixin flex-row-center-center {
  @include flex-row;
  justify-content: center;
  align-items: center;
}

@mixin flex-row-between-center {
  @include flex-row;
  justify-content: space-between;
  align-items: center;
}

@mixin flex-column-center-center {
  @include flex-column;
  justify-content: center;
  align-items: center;
}

@mixin flex-column-between-center {
  @include flex-column;
  justify-content: space-between;
  align-items: center;
}

@mixin all-full {
  width: 100%;
  height: 100%;
}

// clip: quote from Mihoyo
@mixin clipper {
  animation: clip 3s 1s ease-in-out infinite
}

@mixin text-unselected {
  /*不允许选中文本*/
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

@keyframes clip {
  0% {
    text-shadow: 4px 4px 1px rgba(211, 211, 211, 0.7);
    opacity: 1;
    transform: translate3d(6px, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0)
  }
  3% {
    clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%)
  }
  5% {
    clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%)
  }
  7% {
    clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%)
  }
  9% {
    clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%)
  }
  11% {
    text-shadow: -4px 4px 4px rgba(211, 211, 211, 0.7);
    clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%)
  }
  13% {
    clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%)
  }
  15% {
    clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%)
  }
  17% {
    clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%)
  }
  19% {
    clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%)
  }
  20% {
    text-shadow: 4px -4px 4px rgba(211, 211, 211, 0.7);
    clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%)
  }
  28% {
    opacity: 1;
    transform: translate3d(6px, 0, 0)
  }
  to {
    text-shadow: 4px 4px 1px rgba(211, 211, 211, 0.7);
    opacity: 1;
    transform: translate(0);
    -webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
    clip-path: polygon(0 0, 0 0, 0 0, 0 0)
  }
}